snippet sl-file
	/*
		@ 名称: 自定义 input[type=file]
		@ 用法: 添加 class .sl-file
		@ 例子：
			 <span class="sl-file">
				<input type="button" value="点击选择图片" />
				<input type="file" exts="png|jpg|bmp" class=".sl-file-input" />
			</span>
	*/

	/* 基础样式 */
	.sl-file{
		position:relative;
		display:inline-block;
		zoom:1;
		cursor:pointer;
		overflow:hidden;
		vertical-align:middle;
	}

	/* 影响 .ui-input-file 的样式 */
	.sl-file .sl-file-input{
		position:absolute;
		right:0;
		top:0;
		_font-size:100px; /* overwrite*/
		_font-size:12px;
		_zoom:10; /* overwrite */
		height:100%;
		_height:auto;
		opacity:0;
		filter:alpha(opacity=0);
		-ms-filter:"alpha(opacity=0)";
		cursor:pointer;
	}
snippet sl-floatcenter
	/*
		@名称: float center
		@用法：

		 1. 外框加上 .sl-floatcenter, 子元素加上 .sl-floatcenter-item，元素就可以自动根据父元素的宽度水平居中

		 2. 结构(例:3栏)：别忘记给每个栏加宽度
			<ul class="sl-floatcenter clearfix">
				<li class="sl-floatcenter-item">item1</li>
				<li class="sl-floatcenter-item">item2</li>
				<li class="sl-floatcenter-item">item3</li>
			</ul>

	*/

	.sl-floatcenter{
		display:block;text-align:center;

		/* 解决间隙问题 */
		font-size:0;
	}
	.sl-floatcenter-item{
		display:inline-block;*display:inline;*zoom:1;

		/* 解决不能水平对齐问题 */
		vertical-align:top;

		/* 解决间隙问题后遗症解决 */
		font-size:13px;
	}

	/* 让 chrome 支持 12px 以下的字体 */
	@media screen and (-webkit-min-device-pixel-ratio:0){
		.sl-floatcenter{-webkit-text-size-adjust:none;font-size:1px;}
	}
snippet sl-ime-disabled
	/*
		@ 名称: 禁用中文输入法
		@ 用法:
			在需要禁用的地方添加: .sl-ime-disabled;
	*/

	.sl-ime-disabled{
		ime-mode:disabled!important;

	}

snippet sl-outline
	/*
		@ 名称: 去除虚线框
		@ 描述: 去除作为焦点的按钮的虚线框
		@ 用法: 把css引入
		@ 例子: IE 需要在标签中添加 hidefocus 属性，值可以为空，如:

			<input href="#" hidefocus value="alipay WD"  type="button" />

			<a /> 标签同理。
	*/


	/* hack for Firefox */
	input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{
		border : 0px;
	}

	/* 不要随便去掉虚线框 */
	input[type=submit]:focus, input[type=button]:focus{
		outline : none;
	}

snippet sl-rc
	/*
	  @ 名称: 1像素圆角
	  @ 描述: 需要自己设置宽度，或者高度，否则会随内容自适应
	  @ 用法:
		最外层：.sl-rc
		内容层：.sl-rc-cnt
		鼠标经过：.sl-rc-hover
	*/

	/* base */
	.sl-rc{
	  display:inline-block;vertical-align: middle;
	  border-left:1px solid #ddd;border-right:1px solid #ddd;  /* 可重设 */
	}

	/*
	  不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框
	  这会引发 IE 的 1px 的黑边 bug
	  Note: 一般不要把 input 作为.sl-rc-cnt 层
	 */
	.sl-rc-cnt{
	  float:left;position: relative;
	  border-top: 1px solid #ddd;border-bottom:1px solid #ddd; /* 可重设 */
	  margin:-1px 0;
	}

	/* HACK for ie6 7 */
	div.sl-rc, p.sl-rc, h2.sl-rc, h3.sl-rc, h4.sl-rc, h5.sl-rc, h6.sl-rc, ul.sl-rc, ol.sl-rc{
	  *display: inline;
	}

	/* 鼠标经过 */
	.sl-rc-hover, .sl-rc-hover .sl-rc-cnt, .sl-rc:hover, .sl-rc:hover .sl-rc-cnt{
	  border-color: #aaa; /* 可重设 */
	  text-decoration: none;
	}

snippet sl-rotate
	/*
		@ 名称: 翻转90度
		@ 用法: 添加 .sl-rotate, 默认为顺时针旋转90度, 逆时针翻转需添加 .sl-rotate-90ccw
		@ 用法:

			默认: <span class="sl-rotate sl-rotate-90">顺时针转一下</span>
				<span class="sl-rotate sl-rotate-90cw">顺时针转一下</span>
				<span class="sl-rotate sl-rotate-90ccw">逆时针转一下</span>

	*/

	.sl-rotate{
		zoom:1;
	}

	/* for inline elements */
	span.sl-rotate, em.sl-rotate, cite.sl-rotate, strong.sl-rotate, abbr.sl-rotate, li.sl-rotate{
		display:inline-block;
	}

	/* 逆时针 */
	.sl-rotate-90ccw{
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotae(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
		transform: rotate(-90deg);
	}

	/* 顺时针 */
	.sl-rotate-90cw, .sl-rotate-90{
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
		-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
		transform: rotate(90deg);
	}

snippet sl-selectmask
	/*
		@ 名称: 解决 <select /> z-index 太高问题
		@ 描述: 浮层被 select 穿透，是最常见的 z-index bug
		@ 例子：
			 <div id="dd3" class="sl-selectmask" style="background:#FF3366;">
				内容<br/>
			<!--[if lte IE 6.5]><iframe src="javascript:'';"></iframe><![endif]-->
			</div>
	*/

	.sl-selectmask {
		position: absolute;
		left:0;
		top:0;
		z-index: 10;
		overflow: hidden;
		width: 33em;
	}
	.sl-selectmask iframe {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		border:none;
		filter: mask();
		width: 3000px; /* for any big value */
		height: 3000px /* for any big value */
	}

snippet sl-shadow
	/*
		@ 名称: 投影 | drop shadow
		@ 用法: 添加 .sl-shadow
		@ 实例:

		  <div class="sl-shadow">
		  	<!-- your context to go -->
		  </div><!-- .sl-shadow -->

	*/

	.sl-shadow{

		/* modern web browsers */
		-moz-box-shadow:1px 3px 12px #bbb;
		-webkit-box-shadow:1px 3px 12px #bbb;
		box-shadow:1px 3px 12px #bbb;

		/* 一定要设置background, 不然 ie 会显示在字体上 */
		background: #fff;

		/* gte=ie8 */
		-ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";

		/* lte=ie7 */
		*filter:
		progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
		progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
		progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
		progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
	}

snippet sl-wrap
	/*
		@ 名称: 强制换行
		@ 用法:
				* 一般块级元素用：.sl-wrap
				* table标签中需添加：.sl-wrap-table
		@ 例子:
				<p class="sl-wrap">…</p>

				<table class="sl-wrap sl-wrap-table"></table>
	*/

	/* 一般 block-level 元素 */
	.sl-wrap, .sl-wrap td, .sl-wrap th{
		word-wrap:break-word;word-break:break-all;
	}

	/* table */
	.sl-wrap-table{
		table-layout:fixed;
	}
